<script>
import dataApi from '@/view/data-api-edit'
// import LabelText from '../comm/LabelText'
import AddImg from '../comm/AddImg'
import fileSelect from '../comm/file-select'
import ajaxApi from '../ajax-api'
export default {
  props: {
    maxCount: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      isUploading: false
    }
  },
  methods: {
    onAdd () {
      this.upload().finally(() => {
        this.isUploading = false
      })
    },
    async upload () {
      const file = await fileSelect({
        accept: 'image/*',
        fileSizeLimit: 30,
        onError: (error) => {
          this.$toast.error(error.message)
        }
      })
      this.isUploading = true
      const { vAddImg } = this.$refs
      const { url } = await ajaxApi.fileUpload({
        file,
        onProgress: (p) => {
          vAddImg.progressText = ~~(p * 100) + '%'
        },
        cancelToken: cancel => {
          this.abortFileUpload = cancel
        }
      })
      vAddImg.progressText = ''
      vAddImg.add(url)
    },
    onChange (images) {
      dataApi.currActiveItem.images = images
    },
    onAbort () {
      this.abortFileUpload()
    }
  },
  render () {
    let itemData = dataApi.currActiveItem
    return (
      <div class="set-item">
        <div class="tit">图片</div>
        <div class="it">
          <AddImg ref="vAddImg" maxCount={this.maxCount} onAdd={this.onAdd} onChange={this.onChange} initImages={itemData.images} isUploading={this.isUploading} onCancel={this.onAbort} />
        </div>
      </div>
    )
  }
}
</script>
